<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯云设备管理</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app">
        <!-- 左侧导航 -->
        <div class="nav">
            <div class="menu-item logo-head">
                <img class="logo" src="./images/tencent-cloud.svg" alt="">
            </div>
            <div class="menu-item">
                首页
            </div>
            <div class="menu-item">
                账号信息
            </div>
            <div class="menu-item">
                实名认证
            </div>
            <div class="menu-item">
                安全设置
            </div>
            <div class="menu-item active-route">
                设备管理
            </div>
            <div class="menu-item">
                应用服务授权
            </div>
            <div class="menu-item">
                访问管理
            </div>
            <div class="menu-item">
                系统信息
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="container">
            <!-- 头部 -->
            <div class="head-wrap">
                <div class="avtar">管</div>
                <div>订单</div>
                <div>备案</div>
                <div>工具</div>
                <div>费用</div>
            </div>
            <!-- 主体 -->
            <div class="content">
                <div class="title-wrap">
                    设备管理
                </div>
                <div class="equip-info">
                    <!-- 提示信息 -->
                    <div class="tip">
                        <span class="warning"></span>
                        说明：设备管理用于按管理云资源，可以对云资源进行管理和启用
                    </div>
                    <!-- 新增按钮 和 搜索框 -->
                    <div class="equip-btn-wrap">
                        <div class="btn-item fl">
                            <button class="add-btn" @click="showDialog=true">新建</button>
                        </div>
                        <div class="btn-item fl">
                            <input type="checkbox">
                            <span>全部启用</span>
                        </div>
                        <div class="btn-item fr">
                            <input type="text" class="search-input" placeholder="请输入设备名称">
                            <div class="clear-btn"></div>
                        </div>
                    </div>
                    <!-- 设备列表 -->
                    <div class="equip-card">
                        <div class="equip-head">
                            <div>设备名称</div>
                            <div>设备IP</div>
                            <div>设备说明</div>
                            <div>操作</div>
                        </div>
                        <div class="equip-list-wrap">
                            <table class="equip-list" v-if="true">
                                <tbody>
                                    <!-- 测试设备1 -->
                                    <tr v-for="(item,index) in defaultList" :key="item.id">
                                        <td>
                                            {{item.name}}
                                            <span class="equip-id">（ID: {{item.id}}）</span>
                                        </td>
                                        <td>这是一个{{item.enable ? '启用' :'停用'}}的设备</td>
                                        <td>{{item.ip}}</td>
                                        <td>
                                            <button @click="del(item.id)">删除</button>
                                            <div class="switch" :class="item.enable ? 'active' : '' " @click="item.enable = !item.enable">
                                                <span class="switch-btn"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- 测试设备2 -->
                                    <!-- <tr>
                                        <td>
                                            测试设备2
                                            <span class="equip-id">（ID: 1697420179352）</span>
                                        </td>
                                        <td>这是一个的设备</td>
                                        <td>127.0.0.2</td>
                                        <td>
                                            <button>删除</button>
                                            <div class="switch">
                                                <span class="switch-btn"></span>
                                            </div>
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>
                            <div class="no-data" v-else>暂无设备</div>
                        </div>
                        <!-- 设备数量 -->
                        <div class="equip-num">
                            共 2 台设备
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增弹层 -->
        <div class="dialog-bg" v-if="showDialog">
            <div class="dialog-content">
                <div class="dialog-title">
                    新增设备
                    <button class="dialog-close">
                        <i @click="showDialog=false"></i>
                    </button>
                </div>
                <form >
                    <div class="form-item">
                        <div class="form-label">
                            <label>设备名称</label>
                        </div>
                        <div class="form-control">
                            <input type="text" v-model.trim="deviceObj.name" placeholder="请输入设备名称">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label">
                            <label>设备IP</label>
                        </div>
                        <div class="form-control">
                            <input type="text" v-model.trim="deviceObj.ip" placeholder="请输入设备IP">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label">
                            <label>设备说明</label>
                        </div>
                        <div class="form-control">
                            <textarea class="" name="info" v-model.trim="deviceObj.remark" placeholder="请输入设备说明"></textarea>
                        </div>
                    </div>
                    <div class="btn-wrap">
                        <button class="btn primary" type="submit" @click="add">确定</button>
                        <button class="btn " @click="showDialog=false">取消</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // TODO：阅读代码，根据提供的数据，实现目标效果
        // DATA字段说明
        /**
         *  showDialog 是否显示新建弹层,true代表显示,false代表关闭
         *  equipList 设备列表
         *  name 设备名称
         *  remark 设备说明
         *  ip 设备ip
         *  id 设备id，新建设备时的毫秒数
         *  status 设备状态,true代表启动,false代表停用
        */
        const defaultList = [
            {
                name: '华南服务器1H1G',
                remark: '华南服务器',
                id: 1697420179351,
                ip: '49.38.27.16',
                enable: false

            },
            {
                name: '华北服务器1H2G',
                remark: '华北服务器',
                id: 1697420179352,
                ip: '49.38.27.17',
                enable: true

            }
        ]
        const app = new Vue({
            el: '#app',
            data: {
                showDialog: false,
                equipList: defaultList,
                deviceObj:{
                    id:Date.now(),
                    name:'',
                    ip:'',
                    remark:'',
                    enable:false
                },
                defaultList :[
                {
                    name: '华南服务器1H1G',
                    remark: '华南服务器',
                    id: 1697420179351,
                    ip: '49.38.27.16',
                    enable: false

                },
                {
                    name: '华北服务器1H2G',
                    remark: '华北服务器',
                    id: 1697420179352,
                    ip: '49.38.27.17',
                    enable: true

                }
            ]
            },

            methods: {
                add(e){
                    event.preventDefault();
                    //this.deviceObj.id = Date.now()
                    console.log(this.deviceObj)
                    this.defaultList.unshift(this.deviceObj)
                    this.showDialog = false
                },
                del(id){
                    this.defaultList = this.defaultList.filter(item => item.id !== id)
                },
                change(id){
                    this.defaultList.forEach(element => {
                        if(element.id === id){
                            element.enable = !element.enable
                        }
                    });
                }
            },
            mounted() {
                
            },
        })
    </script>
</body>
</html>